<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>

		<!-- 
				1.一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype
				2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。如果么有这个
					关系，vue上的属性，方法只有vue实例vm能用，vc不能用；
		 -->
	</head>
	<body>
		<div id="root">
			<school></school>
		</div>
		<script type="text/javascript">
				Vue.prototype.x = 99 //在vm上追加x，vm可以访问到这个x吗？当然可以；
			
				const school = Vue.extend({
					//组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
					//el:"#root", 
					
					//template不能作为根元素使用，必须包含一个<div>
					template:` 
						<div>
							<h1>学校：{{schollName}}</h1>
							<h1>地址:{{address}}</h1>
							<button @click = "showX">显示x</button>
						</div>
					`,
					data(){
						return {
							schollName:"尚硅谷",
							address:"和平谷",
						}
					},
					methods:{
						showX(){
							alert(this.x); //x是定义在vm原型上的；
						}
					}
				})
			
			const vm = new Vue({
				el:"#root",
				components:{
					school
				}
			})
			
			//VueComponents 和Vue原型是一个吗？通过下判断发现程序报错。
			/* 
				下面这样写是错的，vue是上面通过scrip标签引入的，但VueCommponents是怎么出来的？
				是调用Vue.extend返回的；把VueComponents换成school就对了；
			 */
			//console.log(VueComponents.prototype.__proto__ === Vue.prototype);
			console.log(school.prototype.__proto__ ===  Vue.prototype) //返回true；
			
		/* 			

			//回顾一下原型知识
			 function Demo(){
				 this.a = 1;
				 this.b =2;
			 }
			 
			 //创建一个Demo的实例对象
			 const d = new Demo();
			 //只要是函数，身上一定有这个：Demo.prototype
			 //显示原型属性和隐式原型属性统称原型对象；
			 console.log(Demo.prototype) //显示原型属性
			 console.log(d.__proto__) //隐式原型属性
			 
			 console.log("@@",Demo.prototype == d.__proto__) //返回true，这俩是一个东西；
			 
			 //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
			 Demo.prototype.x = 99
			  //能不能拿到这个x，可以，因为Demo.prototype和d.__proto__是一个东西；
			 console.log("@x=",d.__proto__.x)
			 //为什么要这么写？其实也可以这样拿到x，这样为什么也可以拿到x？
			 //因为Demo中没有x这个属性，就会按照隐式原型链查找，结果查到这个x；
			 console.log("@xxx=",d.x);
				
			*/
						
		</script>
	</body>
</html>